<template lang="pug">
el-dialog(
  :visible.sync="show"
  width="1024px"
  @open="beforeOpen"
  :before-close="handleClose"
  custom-class="dialog-border"
  :close-on-click-modal="false"
)
  .modal-title(slot="title") 添加材料属性
  .modal-content
    .modal-section-list
      .section-header
        el-input(prefix-icon="el-icon-search" placeholder="请输入属性名称" v-model="attributeName" @change="searchList")
      .section-body
        el-table(
          :data="allTableList"
          :header-cell-style="{ fontSize: '14px', color: '#64698F', background: '#F8F7FC' }"
          border
          height="450"
          style="width: 100%"
          v-loading="loading"
          empty-text="未找到符合条件的内容"
        )
          el-table-column(width="55" align="center" label="序号")
            template(slot-scope="scope")
              el-checkbox(v-model="scope.row.isChecked", :disabled="scope.row.isDisabled" @change="changeCheckbox(scope.row)")
          el-table-column(label="属性名称" prop="attributeName")
          el-table-column(label="属性类型" prop="type")
            template(slot-scope="scope")
              .table-item-value(v-if="scope.row.type == -1") 未填
              .table-item-value(v-if="scope.row.type == 1") 固定属性
              .table-item-value(v-if="scope.row.type == 2") 其他说明
          el-table-column(label="是否必填" prop="isRequired")
            template(slot-scope="scope") {{scope.row.isRequired ? '是' : '否'}}
      .section-footer
        el-pagination(
          background
          layout="prev, pager, next"
          :total="total"
          :current-page="page"
          :pager-count="5"
          :page-size="pageSize"
          @current-change="currentChange"
        )
    .modal-icon
      .iconfont.el-icon-right
    .modal-section-select
      .section-header
        .section-header-title 已添加
      .section-body
        el-table(
          :data="selectList"
          :header-cell-style="{ fontSize: '14px', color: '#64698F', background: '#F8F7FC' }"
          border
          height="490"
          style="width: 100%"
          v-loading="loading"
          empty-text="未找到符合条件的内容"
        )
          el-table-column(label="属性名称" prop="attributeName")
          el-table-column(label="属性类型")
            template(slot-scope="scope")
              .table-item-value(v-if="scope.row.type == -1") 未填
              .table-item-value(v-if="scope.row.type == 1") 固定属性
              .table-item-value(v-if="scope.row.type == 2") 其他说明
          el-table-column(label="是否必填")
            template(slot-scope="scope") {{scope.row.isRequired ? '是' : '否'}}
          el-table-column(align="center" label="操作")
            template(slot-scope="scope")
              .table-item-btn(@click="delSelectItem(scope.row, scope.$index)") 删除
  .modal-footer(slot="footer")
    el-button(szie="small" @click="handleClose") 取消
    el-button(szie="small" type="primary" @click="save") 确定
</template>

<script>
import { getAttributePageList, saveClassificationsLinkAttribute } from 'api'
export default {
  name: 'addAttrDialog',
  props: {
    show: Boolean,
    attrList: Array,
    item: Object
  },
  data () {
    return {
      page: 1,
      pageSize: 10,
      total: 0,
      attributeName: '',
      allTableList: [],
      selectList: [],
      loading: false
    }
  },
  methods: {
    beforeOpen () {
      this.attributeName = ''
      this.selectList = [...this.attrList]
      this.getAttributePageList()
    },
    handleClose () {
      this.$emit('close')
    },
    currentChange (page) {
      this.page = page
      this.getAttributePageList()
    },
    searchList () {
      this.page = 1
      this.getAttributePageList()
    },
    changeCheckbox (row) {
      if (row.isChecked) {
        this.selectList.push(row)
      } else {
        let index = this.selectList.findIndex(item => item.attributeId === row.attributeId)
        this.selectList.splice(index, 1)
      }
    },
    delSelectItem (row, index) {
      this.selectList.splice(index, 1)
      this.allTableList.forEach(item => {
        if (item.attributeId === row.attributeId) {
          item.isChecked = false
          item.isDisabled = false
        }
      })
    },
    setListCheck (arr) {
      arr.forEach(item => {
        item.isChecked = false
        item.isDisabled = false
        this.attrList.forEach(row => {
          if (item.attributeId === row.attributeId) {
            item.isChecked = true
            item.isDisabled = true
          }
        })
      })
      this.allTableList = arr
    },
    async save () {
      try {
        let ids = this.selectList.map(item => item.attributeId)
        await this.$axios.post(saveClassificationsLinkAttribute, { classificationId: this.item.attr.classificationId, attributeIds: ids.join(',') })
        this.$emit('confirm')
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    async getAttributePageList () {
      try {
        let query = { currentPage: this.page, pageLines: this.pageSize }
        if (this.attributeName) query.attributeName = this.attributeName
        const { ResultSet } = await this.$axios.post(getAttributePageList, { ...query })
        this.total = ResultSet.recordNumber
        this.setListCheck(ResultSet.userData.result)
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
  }
} 
</script>

<style lang="scss" scoped>
.modal-title {
  font-weight: bold;
  font-size: 16px;
  line-height: 24px;
  color: #3E4373;
}
.modal-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-section-list {
  width: 424px;
  height: 560px;
  background: #FFFFFF;
  border: 1px solid #EDEDED;
  border-radius: 10px;
  padding: 8px;
}
.modal-icon {
  background: rgba(255, 112, 139, 0.5);
  border-radius: 6px;
  width: 32px;
  height: 33px;
  display: flex;
  align-items: center;
  justify-content: center;
  .iconfont {
    font-size: 24px;
    color: #fff;
  }
}
.modal-section-select {
  width: 472px;
  height: 560px;
  background: #FFFFFF;
  border: 1px solid #EDEDED;
  border-radius: 10px;
  padding: 8px;
}
.section-body {
  margin-top: 8px;
}
.section-header-title {
  padding: 8px 0;
  font-weight: bold;
  font-size: 16px;
  line-height: 24px;
  color: #3E4373;
}
.section-footer {
    padding: 10px 0;
    text-align: right;
}
.table-item-btn {
  display: inline-block;
  padding: 5px 8px;
  background: #F6F6F9;
  border-radius: 6px;
  font-size: 12px;
  line-height: 20px;
  color: #3E4373;
  cursor: pointer;
}
</style>
